<template>
  <div id="fu">
    <div id="desc">
      <i class="el-icon-receiving"></i>
      <span>课程管理</span>
    </div>

    <div class="contine">
      <div id="headEdit">
        <div>
          <el-button @click="openCreate">
            <i class="el-icon-plus"></i>
            <span>创建</span>
          </el-button>
        </div>

        <div style="padding-right: 30px">
          <!-- 搜索栏 -->
          <el-row>
            <el-col>
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="formInline.cname" placeholder="课程名"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="formInline.uname" placeholder="教师名"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="formInline.dname" placeholder="系名"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 分页条 -->
      <el-row class="el-nav">
        <el-col :span="24">
          <el-pagination
            background
            layout="prev, pager, next"
            :pager-count="pageCount"
            :page-size="formInline.pageSize"
            :page-count="formInline.pageNum"
            :total="formInline.total"
            @current-change="handleCurrentChange">
          </el-pagination>
        </el-col>
      </el-row>

      <!-- 表格内容 -->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">

            <el-table-column
              prop="courseId"
              label="课程ld">
            </el-table-column>
            <el-table-column
              prop="courseName"
              label="课程名">
            </el-table-column>
            <el-table-column
              prop="teacherName"
              label="教师">
            </el-table-column>
            <el-table-column
              prop="departmentName"
              label="所属系">
            </el-table-column>
            <el-table-column
              prop="courseGrade"
              label="年级">
            </el-table-column>
            <el-table-column
              prop="courseCredit"
              label="学分">
            </el-table-column>
            <el-table-column
              prop="courseTime"
              label="上课时间">
            </el-table-column>
            <el-table-column
              prop="courseSelectedCount"
              label="已选人数">
            </el-table-column>
            <el-table-column
              prop="courseMaxSize"
              label="最大容量">
            </el-table-column>

            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="deleteEdit(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </div>


    <!--创建/修改课程的模态框-->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog"
      width="30%"
      top="10vh">

      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="课程名" label-width="80px" prop="courseName">
          <el-input v-model="form.courseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="授课教师" label-width="80px" prop="courseTeacherId">
          <div id="teacherInfo">
            <el-select v-model="form.courseTeacherId" @change="getDepartmentName" placeholder="请选择教师">
              <el-option
                v-for="(item, index) in teachers"
                :key="index"
                :label="item.teacherName"
                :value="item.teacherId">
              </el-option>
            </el-select>
            <el-input v-model="departmentName" disabled></el-input>
          </div>
        </el-form-item>
        <el-form-item label="年级" label-width="80px" prop="courseGrade">
          <el-input v-model.number="form.courseGrade" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上课时间" label-width="80px">
          <div id="courseTime">
            <el-select v-model="form.day" placeholder="星期">
              <el-option
                v-for="item in days"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="form.lesson" placeholder="节数">
              <el-option
                v-for="item in lessons"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="时长(节)" label-width="80px">
          <el-select v-model="form.count" @change="validCount" placeholder="请选择">
            <el-option
              v-for="item in counts"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课地点" label-width="80px" prop="courseLocation">
          <el-input v-model="form.courseLocation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学分" label-width="80px">
          <el-select v-model="form.courseCredit" placeholder="请选择">
            <el-option :key="1" :label="1 + '分'" :value="1"></el-option>
            <el-option :key="2" :label="2 + '分'" :value="2"></el-option>
            <el-option :key="3" :label="3 + '分'" :value="3"></el-option>
            <el-option :key="4" :label="4 + '分'" :value="4"></el-option>
            <el-option :key="5" :label="5 + '分'" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最大容量" label-width="80px" prop="courseMaxSize">
          <el-input v-model.number="form.courseMaxSize" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试地点" label-width="80px" prop="courseExamLocation">
          <el-input v-model="form.courseExamLocation" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="courseEdit('form')">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {get, post} from "../../common/request";

export default {
  name: "CourseManager",
  data() {
    return {
      formInline: {
        cname: "",
        uname: "",
        dname: "",
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      pageCount: 5,
      tableData: [],

      //模态框中的属性
      title: "",
      dialogFormVisible: false,
      days: [
        {value: 1, name: "星期一"},
        {value: 2, name: "星期二"},
        {value: 3, name: "星期三"},
        {value: 4, name: "星期四"},
        {value: 5, name: "星期五"},
        {value: 6, name: "星期六"},
        {value: 7, name: "星期日"}
      ],
      lessons: [
        {value: 1, name: "第一节"},
        {value: 2, name: "第二节"},
        {value: 3, name: "第三节"},
        {value: 4, name: "第四节"},
        {value: 5, name: "第五节"},
        {value: 6, name: "第六节"},
        {value: 7, name: "第七节"},
        {value: 8, name: "第八节"},
        {value: 9, name: "第九节"},
        {value: 10, name: "第十节"}
      ],
      counts: [
        {value: 1},
        {value: 2},
        {value: 3},
        {value: 4}
      ],
      teachers: [],
      departmentName: "",
      form: {
        courseId: "",
        courseTeacherId: "",
        courseName: "",
        teacherName: "",
        courseGrade: "",
        courseTime: "",
        courseLocation: "",
        courseCredit: 1,
        courseMaxSize: "",
        courseExamLocation: "",
        day: 1,
        lesson: 1,
        count: 1
      },
      //表单验证规则
      rules: {
        //验证 form 属性
        courseName: [
          {required: true, message: '请输入课程名称', trigger: 'blur'},
          {min: 2, message: '至少 2 个字符', trigger: 'blur'}
        ],
        courseGrade: [
          {type: 'number', required: true, message: '请输入年级', trigger: 'blur'},
          {type: 'number', min: 1000, max: 9999, message: '四位的数字', trigger: 'blur'}
        ],
        courseLocation: [
          {required: true, message: '请输入上课地点', trigger: 'blur'},
          {min: 3, message: '至少 3 个字符', trigger: 'blur'}
        ],
        courseMaxSize: [
          {type: 'number', required: true, message: '请输入最大人数', trigger: 'blur'},
          {type: 'number', min: 10, max: 100, message: '人数应在10~100之间', trigger: 'blur'}
        ],
        courseExamLocation: [
          {required: true, message: '请输入考试地点', trigger: 'blur'},
          {min: 3, message: '至少 3 个字符', trigger: 'blur'}
        ],
        courseTeacherId: [
          {required: true, message: '请选择教师', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    //搜索事件
    onSubmit() {
      this.getData();
      this.formInline.cname = "";
      this.formInline.uname = "";
      this.formInline.dname = "";
    },
    //分页插件的处理
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getData();
    },
    //点击操作的函数处理
    handleEdit(index, row) {
      this.title = "编辑课程";
      get("/course/getCourseInfoById/" + row.courseId).then(x => {
        this.form = x.data;
        let time = x.data.courseTime.split("-");
        this.form.day = parseInt(time[0]);
        this.form.lesson = parseInt(time[1]);
        this.form.count = parseInt(time[2]);
        this.getDepartmentName();
      })
      get("/teacher/getTeacherInfo").then(x => {
        this.teachers = x.data;
      })
      this.dialogFormVisible = true;
    },
    //删除操作
    deleteEdit(index, row) {
      this.$confirm('您确定要删除课程 ' + row.courseName + ' 吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        get("/course/deleteCourse/" + row.courseId).then(x => {
          if (x.code === 1) {
            this.$message.success(x.msg);
            this.getData();
          } else {
            this.$message.error(x.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //转换日期时间
    transformTime(courseTime) {
      let day = courseTime.split("-")[0];
      let start = courseTime.split("-")[1];
      let count = courseTime.split("-")[2];
      switch (day) {
        case '1':
          day = "星期一";
          break;
        case '2':
          day = "星期二";
          break;
        case '3':
          day = "星期三";
          break;
        case '4':
          day = "星期四";
          break;
        case '5':
          day = "星期五";
          break;
        case '6':
          day = "星期六";
          break;
        case '7':
          day = "星期日";
          break;
      }
      count = parseInt(start) + parseInt(count) - 1;
      return day + " 第" + start + "~" + count + "节";
    },
    //加载页面的数据
    getData() {
      get("/course/getAdminCourseInfo", this.formInline).then(x => {
        this.tableData = x.data.list;
        this.formInline.pageNum = x.data.pageNum;
        this.formInline.pageSize = x.data.pageSize;
        this.formInline.total = x.data.total;

        //进行日期格式的转换
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].courseTime = this.transformTime(this.tableData[i].courseTime);
        }
      })
    },
    //打开创建的模态框
    openCreate() {
      this.title = "创建课程";
      this.dialogFormVisible = true;
      get("/teacher/getTeacherInfo").then(x => {
        this.teachers = x.data;
      })
    },
    //关闭模态框
    closeDialog() {
      this.form.courseId = "";
      this.form.courseTeacherId = "";
      this.form.courseName = "";
      this.form.teacherName = "";
      this.form.courseGrade = "";
      this.form.courseTime = "";
      this.form.courseLocation = "";
      this.departmentName = "";
      this.form.courseMaxSize = "";
      this.form.courseExamLocation = "";
      this.form.day = 1;
      this.form.lesson = 1;
      this.form.count = 1;
      this.form.courseCredit = 1;
      this.dialogFormVisible = false;
    },
    //获得部门的名称
    getDepartmentName() {
      get("/department/getDepartmentById/" + this.form.courseTeacherId).then(x => {
        this.departmentName = x.data.departmentName;
      })
    },
    //验证时间是否超出了正常上课时间
    validCount() {
      if (parseInt(this.form.lesson) + parseInt(this.form.count) > 11) {
        this.$message.error("上课时间超出正常范围");
        this.form.count = 1;
      }
    },
    //模态框的确认事件
    courseEdit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          //验证通过发送请求，添加或者修改数据
          this.form.courseTime = this.form.day + "-" + this.form.lesson + "-" + this.form.count;
          //默认点击模态框是新增的操作
          let url = "/course/addCourseInfo";

          //如果courseId不是空的话，需要进行的是修改的操作
          if (this.form.courseId != null && this.form.courseId > 0) {
            url = "/course/updateCourseInfo";
          }

          post(url, this.form).then(x => {
            if (x.code === 1) {
              this.$message.success(x.msg);
              this.closeDialog();
              this.getData();
            } else {
              this.$message.error(x.msg);
            }
          })

        } else {
          this.$message.error("课程信息填写有误")
          return false;
        }
      });
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>
#fu {
  padding: 0 15px;
  background-color: rgb(240, 240, 240);
}

#desc {
  font-size: 14px;
  padding: 15px 0;
}

.contine {
  background-color: white;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 10px 30px;
}

.el-nav {
  text-align: center;
  margin-bottom: 10px;
}

#headEdit {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#teacherInfo, #courseTime {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

</style>
